import React, { Component } from "react";
import List from "./List";
import Input from "./Input";
import Success from "./Success";
import "./style.css";
class Todolist extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
      listed: [],
    };
  }
  onGetArr = () => {
    return (list) => {
      this.state.list.unshift(list);
      this.setState({});
    };
  };
  onAddlist = () => {
    return (id) => {
      this.setState({
        list: this.state.list.filter((value) => value.id !== id),
        listed: [
          ...this.state.list.filter((value) => value.id === id),
          ...this.state.listed,
        ],
      });
    };
  };
  onAddlisted = () => {
    return (id) => {
      this.setState({
        list: [
          ...this.state.list,
          ...this.state.listed.filter((value) => value.id === id),
        ],
        listed: this.state.listed.filter((value) => value.id !== id),
      });
    };
  };
  render() {
    return (
      <>
        {/* 通过自定义事件接收参数 */}
        <Input onGetArr={this.onGetArr()}></Input>
        <main>
          <List list={this.state.list} onAddlist={this.onAddlist()}></List>
          <hr />
          <Success
            listed={this.state.listed}
            onAddlisted={this.onAddlisted()}
          ></Success>
        </main>
      </>
    );
  }
}
export default Todolist;
